<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${cxt }/">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>前台注册页面</title>
<style type="text/css">
body {
	margin: 0;
	padding: 0;
	height: 100%;
	min-width: 560px;
}

* {
	margin: 0;
	padding: 0;
	border: none;
	transition: all .2s;
}

.bigdiv {
	width: 1347px;
	height: 100%;
	margin: auto;
}

.left {
	top: 0;
	left: 0;
	height: 100%;
	width: 480px;
	float: left;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto;
}

.right {
	width: 868;
	float: left;
	margin-top: 60px;
	margin-left: 180px;
}

.right .welcome {
	font-size: 42px;
	margin-bottom: 15px;
}

.header {
	font-size: 22px;
	margin-bottom: 45px;
	line-height: 1.2;
}

.content input {
	border: 1px #aaa solid;
	border-radius: 4px;
	background: 0 0;
	text-align: left;
	font-size: 20px;
	font-weight: 300;
	width: 438px;
	height: 50px;
	line-height: 50px;
	padding: 0 20px;
	outline: none;
}

.content .yzm {
	border: 1px #aaa solid;
	border-radius: 4px;
	background: 0 0;
	text-align: left;
	font-size: 20px;
	font-weight: 300;
	width: 270px;
	height: 50px;
	line-height: 50px;
	padding: 0 20px;
}

.yzm, .imgs {
	vertical-align: middle;
}

.images {
	margin-left: 20px;
}

.content .zhuce button {
	border: 1px #3083ff solid;
	border-radius: 4px;
	background-color: #3487ff;
	box-shadow: 0 5px 8px 0 rgba(24, 95, 255, .1);
	color: #fff;
	text-align: center;
	font-weight: lighter;
	background-image: linear-gradient(0deg, #398bff, #3083ff);
	width: 532px;
	height: 60px;
	margin: 5px 0 8px;
	font-size: 24px;
}

.content span {
	font-size: 14px;
	color: red;
	display: block;
	margin-left: 63px;
	height: 30px;
}

.input-area {
	position: relative;
}
/*	.input-area .display {
				font-size: 14px;
				display: none;
			}*/
.flag {
	position: absolute;
	top: 15px;
	right: 15px;
	display: none;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
	function init() {
		//书写轮播图片定时操作
		window.setInterval("changeImg()", 1000);
	}
	//书写函数
	var i = 0;

	function changeImg() {
		i++;
		//获取图片位置并设置src
		document.getElementById("img1").src = "images/01-" + i + ".jpg";
		if (i == 3) {
			i = 0;
		}
	}

	$(function() {
		//1、设置点击输入框的样式
		$(".content input").focus(function() {
			$(this).css("border-color", "#3386FF");
		});

		//2、设置输入框失去焦点样式
		$("input[name='uname']")
				.blur(
						function() {
							$(this).css("border-color", "#AAAAAA");
							//3、获得昵称输入框的值
							var uname = $("input[name='uname']").val();
							//alert(uname)
							if (uname.length == 0) {
								document.getElementsByTagName("span")[1].innerHTML = "昵称不能为空！";
								$(this).parent().next(".flag").css("display","none");
								//alert();
							} else {
								var reg = /\s/;
								if (reg.test(uname)) {
									document.getElementsByTagName("span")[1].innerHTML = "昵称不能含有空格！";
									$(this).parent().next(".flag").css("display","none");
								} else {
									document.getElementsByTagName("span")[1].innerHTML = "";
									$(this).parent().next(".flag").css("display","block");
								}

							}
						});

		//4.获得手机号输入框的值
		$("input[name='phone']")
				.blur(
						function() {
							$(this).css("border-color", "#AAAAAA");
							var phone = $("input[name='phone']").val();
							if (phone.length == 0) {
								document.getElementsByTagName("span")[2].innerHTML = "手机号码不能为空！";
								$(this).parent().next(".flag").css("display","none");
							} else {
								var re = /^1[34578]\d{9}$/;
								if (re.test($.trim(phone)) == false) {
									document.getElementsByTagName("span")[2].innerHTML = "手机号码格式不正确！";
									$(this).parent().next(".flag").css("display","none");
								} else {									
									//ajax方式
									var im = $(this).parent().next(".flag");
									$.ajax({
										url:"regAjax",
										type:"GET",
										data:"phone="+phone,
										success:function(data){
											document.getElementsByTagName("span")[2].innerHTML = data;
											if(data!=null && data!=""){
												im.css("display","none");
										}else{
											im.css("display","block");
										}
											
										},
										dataType:"text"
									});
								}
							}
						});

		//5.获得密码输入框的值
		$("input[name='pwd']")
				.blur(
						function() {
							$(this).css("border-color", "#AAAAAA");
							var pwd = $("input[name='pwd']").val();
							if (pwd.length == 0) {
								document.getElementsByTagName("span")[3].innerHTML = "密码不能为空！";
								$(this).parent().next(".flag").css("display","none");
							} else {
								var reg = /\s/;
								if (reg.test(pwd)) {
									document.getElementsByTagName("span")[3].innerHTML = "密码不能含有空格！";
									$(this).parent().next(".flag").css("display","none");
								} else {
									var reg1 = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
									if (reg1.test(pwd) == false) {
										document.getElementsByTagName("span")[3].innerHTML = "密码必须是8-16位的数字和密码组合！";
										$(this).parent().next(".flag").css("display","none");
									} else {
										document.getElementsByTagName("span")[3].innerHTML = "";
										$(this).parent().next(".flag").css("display","block");
									}
								}
							}
						});

		//6.获得验证码输入框的值
		$("input[name='yzm']")
				.blur(
						function() {
							$(this).css("border-color", "#AAAAAA");
							var yzm = $("input[name='yzm']").val();

							if (yzm.length == 0) {
								document.getElementsByTagName("span")[4].innerHTML = "验证码不能为空！";
							} else {
								document.getElementsByTagName("span")[4].innerHTML = "";
							}
						});

		//7、刷新验证码
		$(".imgs").click(function() {
			$(this).attr("src", "checkimg?" + Math.random());
		});

		//8、如果直接点击注册，将会出现下面情况
		$(".zhuce button")
				.click(
						function() {
							var uname = $("input[name='uname']").val();
							var phone = $("input[name='phone']").val();
							var pwd = $("input[name='pwd']").val();
							var yzm = $("input[name='yzm']").val();
							if (uname.length == 0 && phone.length == 0
									&& pwd.length == 0 && yzm.length == 0) {
								document.getElementsByTagName("span")[1].innerHTML = "昵称不能为空！";
								document.getElementsByTagName("span")[2].innerHTML = "手机号不能为空！";
								document.getElementsByTagName("span")[3].innerHTML = "密码不能为空！";
								document.getElementsByTagName("span")[4].innerHTML = "验证码不能为空！";
								return false;
							} else {
								$("#regfrom").submit();
								
							}
						});

		//9.回车实现登录
		var uname = $("input[name='uname']").val();
		var phone = $("input[name='phone']").val();
		var pwd = $("input[name='pwd']").val();
		var yzm = $("input[name='yzm']").val();
		if (uname.length != 0 && phone.length != 0 && pwd.length != 0
				&& yzm.length != 0) {
			if (event.keyCode == 13) {
				$("#regfrom").submit();
				
			}
		}
	});
	
</script>
</head>

<body onload="init()">
	<div class="bigdiv">
		<div class="left">
			<img src="images/01-1.jpg" id="img1" width="480px" height="100%" />
		</div>
		<div class="right">
			<div class="welcome">
				欢迎注册<span style="color: red;">溜溜博客</span>
			</div>
			<div class="header">
				没事就来溜一溜! <img src="images/smiley-tongue-out.gif"> <img
					src="images/smiley-tongue-out.gif"> <img
					src="images/smiley-tongue-out.gif">
			</div>
			<div class="content">
				<form method="post" action="reg" id="regfrom">
					<div class="input-area">
						<div>
							昵&nbsp;&nbsp;&nbsp;称&nbsp;<input type="text" name="uname"
								placeholder="请输入昵称" tabindex="1" />
						</div>
						<div class="flag">
							<img src="images/tick.png">
						</div>
						<span class="display_sapn"></span>
					</div>
					<div class="input-area">
						<div>
							手机号&nbsp;<input type="text" name="phone" placeholder="请输入手机号码"
								tabindex="2" />
						</div>
						<div class="flag">
							<img src="images/tick.png">
						</div>
						<span></span>
					</div>
					<div class="input-area">
						<div>
							密&nbsp;&nbsp;&nbsp;码&nbsp;<input type="password" name="pwd"
								placeholder="请输入密码" tabindex="3" />
						</div>
						<div class="flag">
							<img src="images/tick.png">
						</div>
						<span></span>
					</div>
					<div class="input-area">
						验证码&nbsp;<input type="text" name="yzm" class="yzm"
							placeholder="请输入验证码" tabindex="4" /> <img src="checkimg"
							width="160px" height="50px" class="imgs" /> <span>${checkInfo }</span>
					</div>
					<div class="zhuce">
						<button>立即注册</button>
					</div>
				</form>
			</div>
		</div>
		<div style="clear: both;"></div>
	</div>
</body>

</html>